<template>
	<div class="order-header">
		<div class="container clearfix">
			<div class="header-logo">
				<a href="/#/index"></a>
			</div>
			<div class="title">
				<h2>{{title}}<span><slot name="tips"></slot></span></h2>
			</div>
			<div class="username">
				<a href="javascript:;">{{username}}</a>
			</div>
		</div>
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	export default{
		props:{
			title:String,
			
		},
		computed:{
			//相当于this.$store.state.username
			...mapState(['username'])
		}
	}
</script>

<style lang="less">
	@import './../assets/css/base.less';
	.order-header{
		padding: 30px 0;
		.header-logo{
			float: left;
		}
		.title,.username{
			display: inline-block;
			height: 55px;
			line-height: 55px;
		}
		.title{
			font-size: 28px;
			float: left;
			color: #333;
			margin-left: 54px;
			span{
				font-size: 14px;
				margin-left: 17px;
				color: #999;
				font-weight: bold;
			}
		}
		.username{
			float: right;
			a{
				color: #666;
				font-size: 16px;
			}
		}
	}
</style>
